<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../css/main/base.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/materialize.min.css">
    <link href="https://fonts.css.network/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="../css/stu/index.css">
    <link rel="stylesheet" href="../css/stu/edit_stu_index.css">
    <link rel="stylesheet" href="../css/stu/main_2.css">
    <script src = "../js/util.js"></script>
    <title>学生个人主页</title>
</head>
<body>
<div class="header">
    <div class="aboutWe">
        <a href="../main/test/information.html" target="_blank" style="padding-left: 7px">关于基地</a>
    </div>
    <div class="userLogin" id="userLogin">
        <span class="userInfo">
            <a class='dropdown-button btn' href='#' data-activates='user-zone' id="username">XXX</a>
            <!-- Dropdown Structure -->
            <ul id='user-zone' class='dropdown-content'>
                <li><a href="#!">我的主页</a></li>
                <li class="divider"></li>
                <li><a href="#!">账号设置</a></li>
                <li class="divider"></li>
                <li><a href="#!">退出</a></li>
            </ul>
        </span>
        <span class="line">|</span>
        <a class="mainBtn" target="_blank" id="deliver-btn">投递</a>
        <span class="line">|</span>
        <a class="mainBtn" href="" target="_blank">消息</a>
        <span class="line">|</span>
        <a class="mainBtn" href="" id="exit">退出</a>
    </div>
</div>
<div class="guideBar">
    <div class="nav">
        <p id="home_title">四方馆</p>
        <p id="home_subtitle">人才交流平台</p>
        <p id="homePage">首页</p>
        <p id="teamPage">团队</p>
        <p id="studentPage">学生</p>
    </div>
</div>
<div class="stu_nav">
    <div class="stu_nav_content">
        <div class="stu_nav_img">
            <img src="" id="stu_logo">
            <div class="like_div">
                <img src="../res/imgs/stu/like.svg">
                <span id="like_count"></span>
            </div>
        </div>
        <div class="stu_nav_word">
            <div class="name_slogan_div">
                <div class="stu_nav_word_title">
                    <p id="stu_name"></p>
                    <img id="sex"/>
                    <a id="favourite" class="btn-floating  waves-effect waves-light white"><img
                            src="../res/imgs/team/赞.svg"></a>
                    <a id="chat" class="btn-floating waves-effect waves-light white"><img src="../res/imgs/team/私信.svg"></a>
                    <a id="edit_stu_basic" class="btn-floating waves-effect waves-light"><i class="material-icons"
                                                                                            id="edit_stu_basic_icon">edit</i></a>
                    <p id="stu_title"></p>
                </div>
                <div class="slogan_div">
                    <span id="stu_slogan"></span>
                </div>
            </div>
            <div class="label_div">

            </div>
        </div>
    </div>
    <div class="edit_stu_nav_content no-display">
        <div class="upload_file_div">
            <div class="edit_stu_nav_img">
                <i class="medium material-icons" id="photo_camera">photo_camera</i>
                <img id="orign_stu_avatar">
            </div>
            <form id="post_logo" enctype="multipart/form-data">
                <input type="file" id="upload_stu_logo" style="display: none">
            </form>
            <div class="upload_resume_div">
                <img src="../res/imgs/stu/attachment.svg">
                <a id="upload_resume">上传简历附件</a>
                <p>(仅自己可见，供投递简历时自动选择)</p>
            </div>
            <form id="post_resume" enctype="multipart/form-data">
                <input type="file" id="upload_stu_resume" style="display: none">
            </form>
            <div class="scan_personal_homepage_div">
                <img src="../res/imgs/stu/browse.svg">
                <a id="scan_personal_homepage">预览个人主页</a>
            </div>
        </div>
        <div class="stu_basic_edit_div">
            <div class="input-field">
                <input id="stu_name_input" type="text" class="validate">
                <label for="stu_name_input">个人姓名(昵称)</label>
            </div>
            <div class="input-field">
                <input id="stu_title_input" type="text" class="validate">
                <label for="stu_title_input">头衔</label>
            </div>
            <div class="input-field">
                <input id="personal_signature" type="text" class="validate">
                <label for="personal_signature">个性签名</label>
            </div>
            <div class="input-field">
                <input id="school_name" type="text" class="validate">
                <label for="school_name">学校名称</label>
            </div>
            <div class="input-field select_div">
                <select id="stu_sex">
                    <option value="-1" selected="selected">请选择</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
                <label for="stu_sex">性别</label>
            </div>
            <div class="input-field select_div" style="margin-left: 20px;">
                <select id="stu_grade">
                    <option value="-1" selected>请选择</option>
                    <option value="0">大一</option>
                    <option value="1">大二</option>
                    <option value="2">大三</option>
                    <option value="3">大四</option>
                    <option value="4">研一</option>
                    <option value="5">研二</option>
                    <option value="6">研三</option>
                    <option value="7">博士</option>
                </select>
                <label for="stu_grade">年级</label>
            </div>
            <div class="stu_label_container">
                <p class="placeholder_text">个人领域类型(可多选)</p>
                <div class="stu_label_div">
                    <div class="chip label_choice">工程</div>
                    <div class="chip label_choice">艺术</div>
                    <div class="chip label_choice">人文</div>
                    <div class="chip label_choice">经管</div>
                </div>
            </div>
        </div>
        <div class="stu_info_function_area">
            <a class="waves-effect waves-light btn" id="save_stu_info">保存</a>
            <a class="waves-effect waves-light btn" id="cancel_stu_info">取消</a>
        </div>
    </div>

</div>
<div class="stu_detail">
    <div class="about_me">
        <div class="sub_title">
            <span>关于我</span>
            <a id="edit_about_me" class="btn-floating waves-effect waves-light"><i class="material-icons"
                                                                                   id="edit_about_me_icon">edit</i></a>
        </div>
        <div class="about_me_container">
            <p class="empty_remainder">精彩等待开启</p>
            <!--<div class="about_me_div card">-->
            <!--<div class="about_me_title">个人经历</div>-->
            <!--<div class="about_me_content">-->
            <!--在这个软件中增加一个小天使的功能，当你在忙碌的时候可以激活小天使来帮你，然后可以给小天使一个合理的回报，比如请吃饭，你们觉得怎么样？-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="about_me_div card">-->
            <!--<div class="about_me_title">实习经历</div>-->
            <!--<div class="about_me_content">-->
            <!--在这个软件中增加一个小天使的功能，当你在忙碌的时候可以激活小天使来帮你，然后可以给小天使一个合理的回报，比如请吃饭，你们觉得怎么样？-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="about_me_div card">-->
            <!--<div class="about_me_title">我</div>-->
            <!--<div class="about_me_content">-->
            <!--在这个软件中增加一个小天使的功能，当你在忙碌的时候可以激活小天使来帮你，然后可以给小天使一个合理的回报，比如请吃饭，你们觉得怎么样？-->
            <!--</div>-->
            <!--</div>-->
        </div>
        <div class="edit_about_me_container no-display">
            <div class="edit_about_me_div">
                <div class="input-field">
                    <textarea class="materialize-textarea edit_title"></textarea>
                    <i class="material-icons clear_content">close</i>
                    <textarea class="materialize-textarea edit_content"></textarea>
                </div>
                <div class="input-field">
                    <textarea class="materialize-textarea edit_title"></textarea>
                    <i class="material-icons clear_content">close</i>
                    <textarea class="materialize-textarea edit_content"></textarea>
                </div>
                <div class="input-field">
                    <textarea class="materialize-textarea edit_title"></textarea>
                    <i class="material-icons clear_content">close</i>
                    <textarea class="materialize-textarea edit_content"></textarea>
                </div>
            </div>
            <p class="tips">*你也可以通过自定义修改每个卡片的标签，来填上你最想展示的内容。</p>
            <div class="about_me_function_area">
                <a class="waves-effect waves-light btn" id="save_about_me">保存</a>
                <a class="waves-effect waves-light btn" id="cancel_about_me">取消</a>
            </div>
        </div>
    </div>

</div>
<div class="stu-skill">
    <div class="title">特长与技能
        <span class="editable"></span>
    </div>
    <div class="edit-container">
        <div class="new-skill row">
            <div class="col s4">
                <input type="text" placeholder="输入你擅长的技能" id="skill-name">
            </div>
            <div class="col s6">
                <p class="range-field">
                    <input type="range" id="new_skill" min="0" max="100"/>
                </p>
            </div>
            <div class="col s2 add-btn">
                <a class="btn-floating btn-large waves-effect waves-light "><i class="material-icons">add</i></a>
            </div>
        </div>
        <div class="hots-skills">
            <span>热门技能：</span>
            <span class="reference">平面设计</span>
            <span class="reference">文案策划</span>
            <span class="reference">3D建模</span>
            <span class="reference">web开发</span>
            <span class="reference">H5开发</span>
            <span class="reference">摄影剪辑</span>
        </div>
        <div id="skills">
            <!--<div class="skill row">-->
            <!--<div class="name col s3">交互设计</div>-->
            <!--<div class="col s8 level">-->
            <!--<p class="range-field">-->
            <!--<input type="range" id="skill_0" min="0" max="100" value="80"/>-->
            <!--</p>-->
            <!--</div>-->
            <!--<a class="delete-btn col s1">-->
            <!--<i class="material-icons">cancel</i>-->
            <!--</a>-->
            <!--</div>-->
            <!--<div class="skill row">-->
            <!--<div class="name col s3">xuxux</div>-->
            <!--<div class="col s8 level">-->
            <!--<p class="range-field">-->
            <!--<input type="range" id="skill_1" min="0" max="100" value="80"/>-->
            <!--</p>-->
            <!--</div>-->
            <!--<a class="delete-btn col s1">-->
            <!--<i class="material-icons">cancel</i>-->
            <!--</a>-->
            <!--</div>-->
        </div>
        <p class="hint">* 您添加的技能已达到上限，最多添加八个技能</p>
        <div class="btn-bar">
            <button class="btn waves-effect waves-light save-btn" id="save-skills">保存</button>
            <button class="btn waves-effect waves-light total-cancel-btn">取消</button>
        </div>
    </div>
    <!--<canvas width="1000" height="500" class="stu-canvas"></canvas>-->
    <div id="circles" class="show-container">
        <div class="deco-circle" id="deco_0"></div>
        <div class="deco-circle" id="deco_1"></div>
        <div class="skill-circle" id="circle_0">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_1">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_2">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_3">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_4">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_5">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_6">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="skill-circle" id="circle_7">
            <div class="inner-circle">
                <p></p>
                <p></p>
            </div>
        </div>
        <div class="deco-circle" id="deco_2"></div>
    </div>
</div>

<div class="stu-work">
    <div class="title">作品展示
        <span class="editable"></span>
    </div>
    <div class="edit-container">
        <div class="input-field row">
            <input id="work_name" type="text" class="validate" maxlength="20">
            <label for="work_name">作品名称（20字以内）</label>
        </div>
        <div class="input-field row">
            <input id="work_role" type="text" class="validate" maxlength="20">
            <label for="work_role">职责介绍（20字以内）</label>
        </div>
        <div class="input-field col s12">
            <textarea class="materialize-textarea" id="work_link" type="text" class="validate"
                      maxlength="250"></textarea>
            <label for="work_link">实际作品链接或地址（250字以内）</label>
        </div>
        <div>上传作品附件</div>
        <div class="upload-container">
            <div class="btn-container">
                <div class="upload-btn image-selector">
                    <input type="file" id="image_selector" accept=".jpg,.png,.jpeg.jp3,.jp2">
                    <label for="image_selector"></label>
                </div>
                <p class="hint">(尺寸为800 * 450px)</p>
            </div>
            <div class="btn-container">
                <div class="upload-btn video-selector">
                    <input type="file" id="video_selector" accept=".mp4,.ogg,.webm">
                    <label for="video_selector"></label>
                </div>
                <p class="hint">(大小在20M以内)</p>
            </div>
            <div class="btn-container">
                <div class="upload-btn music-selector">
                    <input type="file" id="music_selector" accept=".mp3,.ogg,.mp2">
                    <label for="music_selector"></label>
                </div>
                <p class="hint">(大小在10M以内)</p>
            </div>
        </div>
        <div id="filename"></div>
        <div class="input-field col s12">
            <textarea placeholder="作品描述，请输入你在这个作品或者项目中主要做的工作以及相关的成果和绩效是什么，遇到了什么问题然后能够很好的解决，等等"
                      class="materialize-textarea" id="work_desc" type="text" class="validate"></textarea>
            <label for="work_desc">作品描述</label>
        </div>
        <div class="btn-bar">
            <button class="btn waves-effect waves-light save-btn" id="save-work">保存</button>
            <button class="btn waves-effect waves-light total-cancel-btn">取消</button>
        </div>
    </div>
    <div class="show-container">
        <!--<div class="work">-->
        <!--<div class="work-content">-->
        <!--<div class="work-file">-->

        <!--</div>-->
        <!--<div class="work-title">-->
        <!--<div class="work-name">作品名称</div>-->
        <!--<div class="line">/</div>-->
        <!--<div class="work-duty">职责</div>-->
        <!--<div class="editbar">-->
        <!--<button class="edit-work "></button>-->
        <!--<button class="del-work "></button>-->
        <!--</div>-->
        <!--<div class="work-site">-->
        <!--<span class="edit-link"></span>-->
        <!--<a class="work-link" href="">www.baidu.com</a></div>-->
        <!--</div>-->
        <!--<p class="work-p">-->
        <!--作品正文-->
        <!--</p>-->
        <!--</div>-->
        <!--</div>-->
    </div>

</div>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/materialize.js"></script>
<script type="text/javascript" src="../js/etc.js"></script>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/stu/index.js"></script>
<script src="../js/stu/main2.js"></script>
</body>
</html>